<template>
  <div class="choujiang">
    <!-- <div class="logo">小胡Pro公司年会抽奖</div> -->
    <canvas id="choujiang"></canvas>
    <div class="showText" v-if="showContent">
      <h1 style="color: rgba(255, 255, 255, 0.8)">
        {{currentNum==0?'即将开始抽奖':'当前为'+currentLuck.name+'，中奖信息已显示在右侧'}}
      </h1>
    </div>
    <div class="showUser" v-if="showContent && currentNum != 0">
      <div class="header">中奖信息</div>
      <div class="luckList" v-for="(item, index) in luckList" :key="index">
        <div class="luck-title">{{ item.title }}</div>
        <div class="luck-content" :id="'scroll' + (index + 1)">
          <div
            class="item"
            v-for="(item2, index2) in item.userList"
            :key="index2"
          >
            <div class="avatar">
              <el-avatar :size="25" :src="item2.avatar"></el-avatar>
            </div>
            <div class="name" style="margin-left: 5px">
              {{ item2.username }}
            </div>
            <div class="telephone" style="margin-left: 5px">
              {{ item2.telephone }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="option">
      <el-button @click="start" style="margin-left: 10px" class="btn">
        开始抽奖
      </el-button>
      <el-button @click="stop" class="btn">停止</el-button>
      <!-- <el-button @click="next" class="btn">下一轮</el-button> -->
      <el-button @click="setting" class="btn">设置</el-button>
    </div>
    <el-dialog title="本轮中奖名单" :visible.sync="showThisLuckList">
      <template slot="title">
        <div>{{ currentLuck.name }}中奖名单</div>
      </template>
      <el-table size="medium" :data="thisLuckList" height="300">
        <el-table-column label="头像" prop="avatar" align="center">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="手机号码" prop="telephone"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import * as cj from "@/util/choujiang.js";
export default {
  name: "Choujiang",
  data() {
    return {
      showThisLuckList: false,
      showContent: true,
      currentNum: 0,
      currentStatus: "stop",
      luckList: [],
      thisLuckList: [],
      userList: [],
      currentLuck: {},
      totalLuck: [],
    };
  },
  methods: {
    start() {
      this.thisLuckList = [];
      if (this.currentStatus == "stop") {
        let luckList = JSON.parse(localStorage.getItem("choujiang-luck-list"));
        console.log("currentNum", this.currentNum);
        this.currentLuck = luckList[this.currentNum];
        this.showContent = false;
        this.currentStatus = "start";
        cj.start();
        this.randomLuck();
      } else {
        this.$alert("已经开始抽奖，请勿重复点击", "警告", {
          confirmButtonText: "确定",
        });
      }
    },
    stop() {
      if (this.currentStatus == "stop") {
        this.$alert("当前没有进行的抽奖，请点击开始抽奖后再点击停止", "警告", {
          confirmButtonText: "确定",
        });
        return;
      }
      this.currentStatus = "stop";
      cj.stop();
      this.currentNum++;
      this.showContent = true;
      this.showThisLuckList = true;
      console.log("中奖名单", this.thisLuckList);
    },
    next() {
      if (this.currentStatus == "stop") {
        this.showContent = true;
      } else {
        this.$alert("当前正在抽奖不能进行下一轮，请先停止后再重试", "警告", {
          confirmButtonText: "确定",
        });
      }
    },
    randomLuck() {
      let count = this.currentLuck.count;
      for (let i = 0; i < count; i++) {
        let tempIndex = Math.random() * this.userList.length;
        let tmepUser = this.userList[Math.round(tempIndex)];
        console.log(this.userList, Math.round(tempIndex));
        this.thisLuckList.push(tmepUser);
        this.userList.splice(Math.round(tempIndex), 1);
      }
      let param = {
        title: this.currentLuck.name,
        userList: this.thisLuckList,
      };
      this.luckList.push(param);
    },
    setting() {
      this.$router.push("/setting");
    },
    init(){
      setTimeout(function(){},2000)
      cj.load(document);
      this.userList = JSON.parse(localStorage.getItem("choujiang-user-list"));
      this.totalLuck = JSON.parse(localStorage.getItem("choujiang-luck-list"));
    }
  },
  mounted() {
      this.init();
  },
};
</script>
<style scoped>
.choujiang {
  margin: 0;
  width: 100%;
  height: 100vh;
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("../assets/bg.png");
  background-size: 100% 100%;
}
.option {
  position: absolute;
  bottom: 0;
  text-align: left;
  width: 100%;
}
.btn {
  margin-bottom: 10px;
  padding: 5px;
  font-weight: bold;
}
.showUser {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
}
.header {
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  background-color: aliceblue;
}
.luckList {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 5px;
  margin: 10px;
}
.luck-title {
  text-align: left;
  font-weight: bold;
}
.luck-content {
  overflow-y: auto;
  max-height: 20vh;
}

.item {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin: 10px 0;
  color: red;
}
.logo {
  position: absolute;
  top: 0;
  font-size: 26px;
  color: #fff;
  font-weight: bold;
  padding-top: 4rem;
}
</style>